<template>
    <view  class="start">
    <image
      class="start-bg"
      style="height: 100vh;"
      src="@/static/answers/start.png"
    ></image>

    <view class="logo-image">
      <image
      class="light-core" 
      src="@/static/answers/core.png"
      mode="widthFix"
    ></image>
    <image
      class="light-edge" 
      src="@/static/answers/edge.png"
      mode="widthFix"
    ></image>
    </view>
    <view @click="toInput"  :class=" sizeStatus ? 'commit-big':'commit-samll'" class="show-content"  :style="{ 'background-image': 'url(' + EnumBG.BU8 + ')' }">测一测</view>
  </view>
</template>

<script setup lang="ts">
import { EnumAnswers } from "../content";
import { EnumBG } from "@/utils/content";
const lightStatus = ref(true)
const emit = defineEmits(['update:answersStatus'])
const toInput = ()=>{
    emit('update:answersStatus',EnumAnswers.INPUT)
}
const sizeStatus = ref(false)
const startTimer = () => {
setInterval(() => {
  lightStatus.value =  !lightStatus.value
  sizeStatus.value = !sizeStatus.value
}, 1000); // 每秒执行一次
};


onMounted(() => {
startTimer();
});
</script>

<style lang="scss" scoped>
.start{
  width: 100%;
  height: 100%;
  .start-bg{
    width: 100%;
  }
  .show-content{
    position: absolute;
    width: 260rpx;
    height: 81rpx;
    top: 89.4%;
    left: 50%;
    transform: translateX(-50%);
    line-height:  81rpx;
    text-align: center;
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10rpx;
  }
  .commit-big{

    top: 88.4%;
    left: 50%;
    width: 280rpx;
    height: 101rpx;
    transition: all 1s;
    }
    .commit-samll{
      width: 260rpx;
      height: 81rpx;
      top: 89.4%;
      left: 50%;
      transition: all 1s;

    }
  .logo-image {
    z-index: 101;
    position: absolute;
    width: 80%;
    height: 30%;
    top: 50%;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.logo-image .light-core {
  position: absolute;
  z-index: 102; 
  width: 152rpx;
}

.logo-image .light-edge {
  position: absolute;
  z-index: 103; 
  width: 400rpx;
  animation: rotate360 4s linear infinite;
}
  @keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
  .bg-light{
    z-index: 100;
    transition: all 1s;
  }
  .light-off{
    z-index: -1;
    transition: all 1s;
  }

}
</style>
